<template>
  <el-dialog
    v-model="dialogVisible"
    title="用户详情"
    width="600px"
  >
    <el-descriptions
      :column="2"
      border
    >
      <el-descriptions-item label="账号">
        {{ user?.username }}
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        {{ user?.name }}
      </el-descriptions-item>
      <el-descriptions-item label="用户类型">
        <el-tag :type="user?.role === 'customer' ? '' : 'success'">
          {{ user?.role === 'customer' ? '客户' : '员工' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="getStatusType(user?.status)">
          {{ getStatusText(user?.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系电话">
        {{ user?.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="注册时间">
        {{ formatDateTime(user?.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="user?.role === 'customer'"
        label="公司名称"
        :span="2"
      >
        {{ user?.company || '-' }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="user?.reviewTime"
        label="审核时间"
        :span="2"
      >
        {{ formatDateTime(user?.reviewTime) }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="user?.lastAction"
        label="最后操作"
        :span="2"
      >
        <div class="last-action">
          <span>{{ user?.lastAction }}</span>
          <span class="action-time">{{ formatDateTime(user?.lastActionTime) }}</span>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  user: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update:modelValue'])

const dialogVisible = ref(false)

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
})

watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

const formatDateTime = (datetime) => {
  return datetime ? dayjs(datetime).format('YYYY-MM-DD HH:mm:ss') : '-'
}

const getStatusType = (status) => {
  const statusMap = {
    pending: 'warning',
    active: 'success',
    frozen: 'danger'
  }
  return statusMap[status] || ''
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待审核',
    active: '正常',
    frozen: '已冻结'
  }
  return statusMap[status] || status
}
</script>

<style scoped>
.last-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-time {
  color: #909399;
  font-size: 0.9em;
}

:deep(.el-descriptions__label) {
  width: 120px;
}
</style> 